<template>
  <div class="product-carousel-card">
    <div class="product-carousel relative">
      <button
        class="carousel-btn left-2"
        @click="scroll(-1)"
        aria-label="Previous"
      >
        <i class="fas fa-chevron-left"></i>
      </button>

      <div class="carousel-container" ref="container">
        <div class="carousel-track flex gap-4">
          <div v-for="product in products" :key="product.id" class="carousel-item" @click="goToDetail(product.id,type)">
            <img
              :src="product.image"
              :alt="product.name"
              class="w-[200px] h-[200px] object-contain rounded-lg hover:opacity-90 transition-opacity"
            >
          </div>
        </div>
      </div>

      <button
        class="carousel-btn right-2"
        @click="scroll(1)"
        aria-label="Next"
      >
        <i class="fas fa-chevron-right"></i>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";

const router = useRouter();
/**
 * 商品横向滚动轮播组件
 * 特点：
 * - 支持左右箭头点击滑动
 * - 平滑滚动效果
 * - 隐藏滚动条但保持可滚动功能
 * - 半透明控制按钮，悬停时不透明
 * - 响应式设计，适配不同屏幕
 * 主要用于展示一组相关商品，如"最想购买的游戏"等横向滚动展示场景
 */

import { ref } from 'vue'
import {hColgroup} from "element-plus/es/components/table/src/h-helper";
import props = hColgroup.props;

interface Product {
  id: number
  name: string
  image: string
}

defineProps<{
  products: Product[],
  type: Number
}>()


// 跳转到商品详情页
const goToDetail = (productId: string,type) => {
  if(type == 1){
    router.push(`/products/detail/${productId}`)
  }else if(type == 2){
    router.push(`/deals/${productId}`)
  }
}



const container = ref<HTMLElement | null>(null)

const scroll = (direction: number) => {
  if (!container.value) return

  const itemWidth = 280 // 单个项目宽度
  const gap = 16 // gap-4 = 1rem = 16px
  const visibleWidth = container.value.clientWidth
  const scrollAmount = Math.floor(visibleWidth / (itemWidth + gap)) * (itemWidth + gap) * direction

  // 计算最大可滚动距离
  const maxScroll = container.value.scrollWidth - visibleWidth

  // 计算目标滚动位置
  const targetScroll = container.value.scrollLeft + scrollAmount

  // 确保不会过度滚动
  if (direction > 0) {
    container.value.scrollTo({
      left: Math.min(targetScroll, maxScroll),
      behavior: 'smooth'
    })
  } else {
    container.value.scrollTo({
      left: Math.max(targetScroll, 0),
      behavior: 'smooth'
    })
  }
}
</script>

<style scoped>
.product-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.carousel-container {
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  height: 100%;
}

.carousel-container::-webkit-scrollbar {
  display: none;
}

.carousel-track {
  display: inline-flex;
  gap: 1rem;
  height: 100%;
  padding: 0 1rem;
  align-items: center;
  white-space: nowrap;
}

.carousel-item {
  flex-shrink: 0;  /* 防止图片缩小 */
  width: 200px;  /* 固定宽度 */
  height: 200px;  /* 固定高度 */
  display: inline-block;  /* 内联块级显示 */
}

.carousel-item img {
  width: 100%;
  height: 100%;
  display: block;  /* 移除图片底部间隙 */
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.8);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transition: background-color 0.2s;
}

.carousel-btn.left-2 {
  left: 0;
}

.carousel-btn.right-2 {
  right: 0;
}

.carousel-btn:hover {
  background-color: rgba(255, 255, 255, 1);
}
</style>
